<template>
    <div class="container">
     <p>空气质量</p>
     <p>空气质量指数：{{ data.indexes[0].aqiDisplay }}</p>
     <p>空气质量等级：{{ data.indexes[0].level }}</p>
     <p>空气质量类型：{{ data.indexes[0].category }}</p>
     <table>
         <tr>
             <th>污染物的名字</th>
             <th>污染物的全称</th>
             <th>污染物的浓度值</th>
             <th>浓度值单位</th>
         </tr>
         <tr v-for="(i, index) in data.pollutants" :key="index">
             <td>{{ i.name }}</td>
             <td>{{ i.fullName }}</td>
             <td>{{ i.concentration.value }}</td>
             <td>{{ i.concentration.unit }}</td>
         </tr>
     </table>
    </div>
 </template>
 
 <script>
     import axios from 'axios';
     import { key } from '../common/constrant.js'
 
     export default{
         data(){
             return{
                 data:[]
             }
         },
 
         mounted(){
             this.getData()
         },
 
         computed:{
             location:function(){
                 return this.$store.state.location
             }
         },
 
         methods:{
             // 获取数据
             getData(){
                 this.loc = Number(this.location.lon).toFixed(2) + "," + Number(this.location.lat).toFixed(2)
                 // console.log(Number(this.location.lon).toFixed(2))
                 axios.get("https://devapi.qweather.com/airquality/v1/current"+"/"+Number(this.location.lat).toFixed(2)+"/"+Number(this.location.lon).toFixed(2),{
                     params:{
                         key: key,
                     }   
                 }).then((res) => {
                 //   console.log(res.data)
                   this.data = res.data
                 //   console.log(this.data.indexes[0].aqiDisplay)
                 })
                 
             },
             
         },
 
         watch:{
             location:function(){
                 this.getData()
             }
         }
     }
 </script>
 
 <style>
 .container {
     width: 80%;
     margin: 0 auto;
     padding: 20px;
     background-color: #f9f9f9;
     border-radius: 8px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     font-family: Arial, sans-serif;
 }
  
 /* 段落样式 */
 .container p {
     margin: 10px 0;
     font-size: 16px;
     color: #333;
 }
  
 /* 表格样式 */
 .container table {
     width: 100%;
     border-collapse: collapse;
     margin-top: 20px;
 }
  
 .container th, .container td {
     padding: 10px;
     text-align: left;
     border-bottom: 1px solid #ddd;
 }
  
 .container th {
     background-color: #f2f2f2;
     font-weight: bold;
 }
  
 .container tr:nth-child(even) {
     background-color: #f9f9f9;
 }
  
 .container tr:hover {
     background-color: #f1f1f1;
 }
  
 /* 表格列宽调整（可选） */
 .container th:nth-child(1), .container td:nth-child(1) {
     width: 20%;
 }
  
 .container th:nth-child(2), .container td:nth-child(2) {
     width: 30%;
 }
  
 .container th:nth-child(3), .container td:nth-child(3) {
     width: 25%;
 }
  
 .container th:nth-child(4), .container td:nth-child(4) {
     width: 25%;
 }
 </style>